<template>
  <page-layout title="制作团队管理" class="container-video">
    <a-card class="car-container">
      <GuestSearch :payload="payload" @change="saveParams"></GuestSearch>
      <my-button class="btn" type="add" @click="toEdit()"></my-button>
      <a-table :columns="columns" rowKey="id" :dataSource="list" :pagination="false">
        <template #uuid="text,row">
          <div class="box">{{text? text : '暂无'}}</div>
        </template>
        <template #action="text, record">
          <div class="action-box">
            <span class="primary" @click="toEdit(record)">编辑</span>
            <span @click="remove(record)" class="danger">删除</span>
          </div>
        </template>
      </a-table>
      <!-- 弹框 -->
      <a-modal
        :maskClosable="false"
        :destroyOnClose="true"
        title="编辑"
        v-model="visible"
        @ok="submit"
        :width="800"
      >
        <a-form :form="form">
          <a-form-item v-bind="formItemLayout" label="优惠卷名称">
            <a-input
              v-decorator="['name',{initialValue: record.name,rules: [{ required: true, message: '请输入名称' }]}]"
              placeholder="请输入"
            ></a-input>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="副标题">
            <a-input
              type="text"
              v-decorator="['subtitle',{initialValue: record.subtitle,rules: [{ required: false,pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{0,20}$/gi ,message:'请输入副标题,最多20个字符,不可输入特殊符号'}]}]"
              placeholder="请输入副标题"
            ></a-input>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="钉钉ID">
            <a-input
              v-decorator="['dingtalk_user_id',{initialValue: record.dingtalk_user_id,rules: [{ required: false, message: '请输入钉钉ID' }]}]"
              placeholder="请输入钉钉ID"
            ></a-input>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="等级">
            <a-input
              type="text"
              v-decorator="['level',{initialValue: record.level,rules: [{ required: true,pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{0,30}$/gi , message: '请输入等级,最多30个字符,不可输入特殊符号' }]}]"
              placeholder="请输入等级"
            ></a-input>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="头像">
            <upload-ali
              v-decorator="['avatar',{initialValue: record.avatar, rules: [{ required: true, message: '请上传头像' }],initialValue: record.avatar || []}]"
            ></upload-ali>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="简介">
            <a-textarea
              :rows="5"
              class="text"
              v-decorator="['introduction',{initialValue: record.introduction,rules: [{ required: true, max: 300,message: '请输入简介，最多输入200字哦' }]}]"
              placeholder="请输入简介，最多输入200字哦"
            ></a-textarea>
          </a-form-item>
        </a-form>
      </a-modal>
      <!-- 分页 -->
      <div class="middle-flex pagintion">
        <my-pagination :total="total" :payload="payload"></my-pagination>
      </div>
    </a-card>
  </page-layout>
</template>

<script>
import GuestSearch from "./GuestSearch";
import * as Api from "@/api/discount";

export default {
  components: {
    GuestSearch
  },
  data() {
    const {
      page = 1,
      per_page = 20,
      name = "",
      amount = ""
    } = this.$route.query;
    return {
      payload: {
        page: Number(page),
        per_page: Number(per_page),
        name,
        amount,
        field: "created_at"
      },
      form: this.$form.createForm(this),
      list: [],
      record: {},
      visible: false,
      total: 0,
      statusText: {
        0: "隐藏",
        1: "展示"
      },
      orderText: {
        asc: "ascend",
        desc: "descend",
        "": false
      },
      columns: [
        {
          title: "序号",
          dataIndex: "index"
        },
        {
          title: "uuid",
          dataIndex: "uuid",
          scopedSlots: { customRender: "uuid" }
        },
        { title: "名称", dataIndex: "name" },
        { title: "金额", dataIndex: "amount" },
        { title: "开始时间", dataIndex: "start_time" },
        { title: "结束时间", dataIndex: "end_time" },
        { title: "使用规则", dataIndex: "remark" },
        { title: "适用地区", dataIndex: "region_code" },
        { title: "已领取", dataIndex: "received_num" },
        { title: "总数量", dataIndex: "num" },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
          width: 200
        }
      ]
    };
  },
  computed: {
    pagination() {
      const { page, per_page } = this.payload;
      return {
        current: Number(page),
        pageSize: Number(per_page),
        total: this.total
      };
    },
    total_page() {
      const { per_page } = this.payload;
      const { total } = this;
      if (per_page > total) return 1;
      return Math.ceil(total / per_page);
    }
  },
  async mounted() {
    this.fetchList();
  },
  methods: {
    // async onChangeStatus(row) {
    //     await Api.change(row);
    //   this.fetchList();
    // },
    async fetchList() {
      const { list, total } = await Api.list(this.payload);
      const { page, per_page } = this.payload;
      list.forEach(
        (item, index) => (item.index = (page - 1) * per_page + index + 1)
      );
      this.list = list;
      this.total = total;
    },
    remove(row) {
      this.record = row;
      this.$confirmModal({
        key: "remove",
        title: "操作",
        content: "您确定要删除嘛",
        onOk: this.onEnter
      });
    },
    async onEnter() {
      //   await Api.remove(this.record.id);
      this.fetchList();
      this.$message.success("删除成功");
    },
    toEdit(record) {
      this.visible = true;
      this.record = { ...record };
      this.record.avatar = this.changeImage(
        this.record.avatar_url,
        this.record.avatar
      );
    },
    submit() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          let d = { ...values };
          d.avatar = this.submitImage(d.avatar);
          d.id = this.record.id;
          if (this.record.id) {
            d.id = this.record.id;
            // await Api.updata(d);
          } else {
            // await Api.add(d);
          }
          this.fetchList();
          this.visible = false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #eee;
  opacity: 0.8;
}
.btn {
  margin-bottom: 15px;
}
.pagintion {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
.action {
  justify-content: center;
}

.btn-to {
  min-height: 35px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  .toInfo {
    width: 150px;
    display: inline-block;
  }
}
</style>
